<!DOCTYPE html>
<html lang="zh-CN" style="color-scheme: dark;" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国古代史</title>
    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="shortcut icon" href="./assets/public/m.ico" />
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-P3D1E12CH1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-P3D1E12CH1');
    </script>
</head>
<body>
<canvas class="fireworks"></canvas>
<div class="head">
    <div class="main">
        <a href="./index.html" class="logo"><img src="./assets/public/MFIKC_.png" alt="MFIKC"></a>
        <div class="menu">
            <li class="magical btn" onclick="window.location.href='./index.html'">Home</li>
            <!-- <li class="magical btn" onclick="window.location.href='./work.html'">Work</li> -->
            <li class="magical btn " onclick="window.location.href='./blog.html'">Blog</li>
            <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
            <li class="magical btn nav" onclick="window.location.href='./timeline.html'">时间轴</li>
        </div>
        <div class="menu" id="menu-expand">
            <li class="magical btn skin" id="menu-expand-child"><i class="icon menu-icon"></i></li>
        </div>
        <div id="menu-panel">
            <div class="menu-panel-content">
                <li class="magical btn" onclick="window.location.href='./index.html'">Home</li>
                <!-- <li class="magical btn" onclick="window.location.href='./work.html'">Work</li> -->
                <li class="magical btn nav" onclick="window.location.href='./blog.html'">Blog</li>
                <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
                <li class="magical btn" onclick="window.location.href='./timeline.html'">时间轴</li>
            </div>
        </div>
    </div>
    <blockquote><img src="./assets/public/logo.svg" alt="M"></blockquote>
</div>
<div class="index">
<!--    <div class="hello">-->
<!--        <div class="title">-->
<!--            <div class="title-hi">Hi, I'm</div>-->
<!--            <a class="title-name" href="http://meverikc.top:8080/">MeverikC</a>-->
<!--        </div>-->
<!--        <div class="hello-desc" id="typed"></div>-->
<!--    </div>-->
    <iframe src="timeline-child.html" width="100%" height="800px" style="border:none; padding-left: 20px"></iframe>
</div>

</body>
<script>
    window.addEventListener("mousemove", function (e) {
        document.querySelectorAll(".magical").forEach(element => {
            const rect = element.getBoundingClientRect();
            const offsetX = e.clientX - rect.left;
            const offsetY = e.clientY - rect.top;
            element.style.setProperty("--mouse-x", `${offsetX}px`);
            element.style.setProperty("--mouse-y", `${offsetY}px`);
        });
    });
</script>
<script src="./js/main.min.js"></script>
<script src='./js/anime.js'></script>
<script src='./js/firework.js'></script>
</html>